<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="quadraForm" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerCriarQuadra.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Cadastrar Quadra</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true" />

                <p:panel id="quadraPanel" styleClass="container_24 clearfix both">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Número" styleClass="grid_3" for="numero"/>
                    <p:inputText id="numero" styleClass="grid_7" value="#{managerCriarQuadra.quadra.numero}"
                                 required="true"  />

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <div class="grid_8">
                        <p:selectOneMenu id="setor" panelStyle="width:150px;" converter="setorconverter"
                                         value="#{managerCriarQuadra.quadra.setor}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.setor}"/>

                            <p:ajax update=":quadraForm:tabView:map" listener="#{managerCriarQuadra.mapearSetor}" />
                        </p:selectOneMenu> 
                    </div>

                    <div class="clear"/>

                </p:panel>

                <p:tabView id="tabView">
                    <p:tab id="tab1" title="Georreferenciamento">

                        <h4 class="title">Georreferenciamento</h4>

                        <p:panel id="geoPanel" styleClass="container_24 clearfix ">

                            <div class="buttonAction">

                                <p:gmap id="map" center="#{managerCriarQuadra.centroMapa}" zoom="#{managerCriarQuadra.zoomLevelMapa}"
                                        rendered="#{!managerLayout.desabilitarMapa() and managerCriarQuadra.connect}" type="HYBRID" 
                                        style="width:97%;height:500px" model="#{managerCriarQuadra.mapModel}" >

                                    <p:ajax event="stateChange" listener="#{managerCriarQuadra.onStateChange}"/>
                                    <p:ajax event="pointSelect" update="@this" listener="#{managerCriarQuadra.handlePointClick}" />
                                    <p:ajax event="markerDrag" update="@this" listener="#{managerCriarQuadra.onMarkerDrag}" />

                                </p:gmap>

                                <div style="float: left; margin-top: -39px; margin-left: 75px;">
                                    <p:commandButton value="Remover pontos" icon="ui-icon-trash" 
                                                     update="@form" process="@this"
                                                     rendered="#{!managerLayout.desabilitarMapa() and managerCriarQuadra.connect}"
                                                     actionListener="#{managerCriarQuadra.removerMarkers()}"
                                                     style="font-size: 12px; width: 140px !important"
                                                     styleClass="ui-priority-primary" />
                                </div>

                                <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                               rendered="#{!managerLayout.desabilitarMapa() and !managerCriarQuadra.connect}"/>

                                <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                               rendered="#{managerLayout.desabilitarMapa()}"/>
                            </div>
                        </p:panel>

                    </p:tab>

                    <p:tab id="tab2" title="Croqui">

                        <p:panel id="croquiPanel" styleClass="container_24 clearfix withoutBorder">
                            <p:fileUpload 
                                mode="advanced"
                                label="Anexar"
                                uploadLabel="Enviar"
                                cancelLabel="Cancelar"
                                fileUploadListener="#{managerCriarQuadra.adicionarCroqui}"
                                multiple="false"
                                auto="true"
                                allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                dragDropSupport="true"
                                invalidFileMessage="Tipo de arquivo não suportado."
                                invalidSizeMessage="Tamanho do arquivo não é suportado"
                                immediate="true"
                                update=":quadraForm:tabView:croquiPanel"/>

                            <fieldset>
                                <legend>Croqui</legend>
                                <div class="my-simple-gallery" >
                                    <div class="grid_4">
                                        <p:commandButton id="removeButton" alt="Remover" styleClass="ui-button-only button-remove"
                                                         style="margin-right: 10px !important;"
                                                         rendered="#{managerCriarQuadra.quadra.croqui ne null}"
                                                         icon="ui-icon-trash" update=":quadraForm:tabView:croquiPanel"
                                                         process="@this" actionListener="#{managerCriarQuadra.removerCroqui()}" />
                                        <figure itemprop="associatedMedia" class="grid_20" onclick="initPhoto(); desabilitaEdicaoImagem();">
                                            <a href="#{managerImagem.urlImagem(managerCriarQuadra.quadra.croqui)}" 
                                               itemprop="contentUrl" data-size="#{managerImagem.widthHeight(managerCriarQuadra.quadra.croqui)}" pid="#{a.id}">
                                                <img src="#{managerImagem.urlThumbnailImagem(managerCriarQuadra.quadra.croqui)}" 
                                                     itemprop="thumbnail" class="image"/>
                                            </a>
                                            <figcaption itemprop="caption description">#{managerCriarQuadra.quadra.croqui.nomeExibicao}</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </fieldset>
                        </p:panel>

                    </p:tab>
                </p:tabView>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk" 
                                     update="@form" 
                                     actionListener="#{managerCriarQuadra.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="pesquisarquadra.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >
            </h:form>

        </ui:define> 
    </ui:composition>

</html>
